<template>
  <div class="panel-container">
    <div class="panel-content">
      <el-row :gutter="30">
        <el-col :span="12">
          <div class="panel-title">资产信息-分类(Top10)</div>
          <div class="pabel-list">
            <div class="panel-item" v-for="(item, index) in dataList" :key="item.name + index">
              <div class="panel-line line1">
                <span class="text-index">第{{ index + 1 }}名</span>
                <span class="text-name">{{ item.name }}</span>
              </div>
              <div class="panel-line space-between">
                <div class="bar">
                  <div class="inner" :style="{ width: (item.num / dataList[0].num) * 100 + '%' }"></div>
                </div>
                <span class="text-num">{{ item.num }}</span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="panel-title">资产订阅-分类(Top10)</div>
          <div class="pabel-list">
            <div class="panel-item" v-for="(item, index) in dataList" :key="item.name + index">
              <div class="panel-line line1">
                <span class="text-index">第{{ index + 1 }}名</span>
                <span class="text-name">{{ item.name }}</span>
              </div>
              <div class="panel-line space-between">
                <div class="bar">
                  <div class="inner" :style="{ width: (item.num / dataList[0].num) * 100 + '%' }"></div>
                </div>
                <span class="text-num">{{ item.num }}</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="panel-content">
      <el-row :gutter="30">
        <el-col :span="12">
          <div class="panel-title">资产订阅-分类(Top10)</div>
          <div class="pabel-list">
            <div class="panel-item" v-for="(item, index) in dataList" :key="item.name + index">
              <div class="panel-line line1">
                <span class="text-index">第{{ index + 1 }}名</span>
                <span class="text-name">{{ item.name }}</span>
              </div>
              <div class="panel-line space-between">
                <div class="bar">
                  <div class="inner" :style="{ width: (item.num / dataList[0].num) * 100 + '%' }"></div>
                </div>
                <span class="text-num">{{ item.num }}</span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="panel-title">搜索词(Top10)</div>
          <div class="pabel-list">
            <div class="panel-item" v-for="(item, index) in dataList" :key="item.name + index">
              <div class="panel-line line1">
                <span class="text-index">第{{ index + 1 }}名</span>
                <span class="text-name">{{ item.name }}</span>
              </div>
              <div class="panel-line space-between">
                <div class="bar">
                  <div class="inner" :style="{ width: (item.num / dataList[0].num) * 100 + '%' }"></div>
                </div>
                <span class="text-num">{{ item.num }}</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="panel-content">
      <el-row :gutter="30">
        <el-col :span="12">
          <div class="panel-title">关键词-查看(Top10)</div>
          <div class="pabel-list">
            <div class="panel-item" v-for="(item, index) in dataList" :key="item.name + index">
              <div class="panel-line line1">
                <span class="text-index">第{{ index + 1 }}名</span>
                <span class="text-name">{{ item.name }}</span>
              </div>
              <div class="panel-line space-between">
                <div class="bar">
                  <div class="inner" :style="{ width: (item.num / dataList[0].num) * 100 + '%' }"></div>
                </div>
                <span class="text-num">{{ item.num }}</span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="panel-title">关键词-联系(Top10)</div>
          <div class="pabel-list">
            <div class="panel-item" v-for="(item, index) in dataList" :key="item.name + index">
              <div class="panel-line line1">
                <span class="text-index">第{{ index + 1 }}名</span>
                <span class="text-name">{{ item.name }}</span>
              </div>
              <div class="panel-line space-between">
                <div class="bar">
                  <div class="inner" :style="{ width: (item.num / dataList[0].num) * 100 + '%' }"></div>
                </div>
                <span class="text-num">{{ item.num }}</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Panel3',
  data() {
    return {
      dataList: [
        {
          name: '废金属',
          num: 688,
        },
        {
          name: '再生塑料',
          num: 568,
        },
        {
          name: '二手设备',
          num: 488,
        },
        {
          name: '报废设备',
          num: 388,
        },
        {
          name: '库存物资',
          num: 188,
        },
        {
          name: 'xxxxx',
          num: 88,
        },
        {
          name: 'xxx',
          num: 68,
        },
        {
          name: 'xxx',
          num: 58,
        },
        {
          name: 'xxx',
          num: 38,
        },
        {
          name: 'xxx',
          num: 8,
        },
      ],
    }
  },
  mounted() {},
  destroyed() {},
  methods: {},
}
</script>

<style scoped lang="scss">
.panel-line {
  align-items: flex-start;
}

.panel-list {
  width: 100%;
}
.panel-item {
  width: 80%;
  margin-bottom: 16px;
  .line1 {
    margin-bottom: 6px;
  }
  .text-index {
    margin-right: 20px;
  }
  .bar {
    width: 80%;
    height: 10px;
    .inner {
      width: 50%;
      height: 100%;
      background: #5db42c;
      border-radius: 0 5px 5px 0;
      opacity: 0.8;
    }
  }
}
.panel-content {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
</style>
